<template>
	<view>
		<Lines></Lines>
		<view class="form">
			<view class="form-item">
				<view class='item-text'>用户名</view>
				<input class='item-input' type="text" focus="true" v-model="user.userName" placeholder="(可选)请输入用户名"/>
			</view>
			<view class="form-item">
				<view class='item-text'>昵称</view>
				<input class='item-input' type="text" focus="true" v-model="user.nickName" placeholder="请输入昵称"/>
			</view>
			<view class="form-item">
				<view class='item-text'>密码</view>
				<input class='item-input' type="password" focus="true" v-model="user.userPwd" placeholder="请输入密码"/>
			</view>
			<view class="form-item">
				<view class='item-text'>确认密码</view>
				<input class='item-input' type="password" focus="true" v-model="user.userPwdTo" placeholder="请确认密码"/>
			</view>
			<view class="form-item">
				<view class='item-text'>验证码</view>
				<input class='item-input' type="text" focus="true" v-model="code" placeholder="请输入验证码"/>
				<button @click="getCoed()" :disabled="flag" plain="true" size='mini' class="code-btn">{{codeTime}}{{flag?'秒':''}}</button>
			</view>
			<view class="register" @click="goDown">注册</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from '../../components/common/Line.vue'
	export default {
		data() {
			return {
				// 验证码
				code:'',
				// 获取到的code
				codeTo:'',
				flag:false,
				codeTime:60,
				// 用户信息
				user:{
					// 手机号
					phone:'',
					// 用户名
					userName:'',
					// 密码
					userPwd:'',
					// 确认密码
					userPwdTo:'',
					// 昵称
					nickName:''
				},
			}
		},
		components:{
			Lines
		},
		onLoad(e) {
			this.user.phone=JSON.parse(e.phone)
			this.getCoed()
		},
		methods: {
			// 下一步，验证码的校验
			goDown(){
				if(this.codeTo===this.code && this.user.userPwd===this.user.userPwdTo && this.user.nickName && this.user.userPwd){
					// // 忘数据库添加一条数据
					$http.request({
						url:'/addUser',
						method:'POST',
						header:{'content-type': 'application/x-www-form-urlencoded'},
						data:{
							userName:this.user.userName || this.user.phone,
							userPwd:this.user.userPwd,
							nickName:this.user.nickName,
							phone:this.user.phone,
						}
					}).then( res=>{
						// 注册成功直接跳转
						if(res.success){
							uni.showToast({
								title:'注册成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'../login/login'
								})
							},1000)
						}
					}).catch(()=>{
						uni.showToast({
							title:'请求失败',
							icon:'none'
						})
					})
				}else{
					uni.showToast({
						title:'验证码有误,或两次输入的密码不正确',
						icon:'none'
					})
				}
			},
			// 获取验证码的方法
			getCoed(){
				// 请求接口返回验证码
				$http.request({
					url: '/code',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						phone:this.user.phone
					}
				}).then((res) => {
					//注册成功
					if(res.success){
						this.codeTo=JSON.stringify(res.code)
						console.log(res.code)
						setTimeout(function() {
							uni.showToast({
								title:"验证码已发送",
								icon:'success'
							})
						},500);
					}
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
				this.codeTime=60
				this.flag=true
				let time=setInterval(()=>{
					this.codeTime-=1
				},1000)
				setTimeout(()=>{
					this.flag=false;
					clearInterval(time);
					this.codeTime='重新发送'
				},60000)
			}
		}
	}
</script>

<style scoped>
.form{
	padding-top: 20rpx;
	margin: 0 20rpx;
}
.form-item{
	padding: 20rpx;
	display: flex;
	border-bottom: 2rpx solid #A1A1A1;
}
.item-text{
	width: 130rpx;
	text-align: justify;
	font-weight: bold;
}
.item-input{
	padding-left: 20rpx;
}
.register{
	width: 90%;
	padding: 26rpx 30rpx;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color: #00B7FF;
	color: #FFFFFF;
	border-radius: 50rpx;
	margin: 30rpx auto;
}
.text{
	display: flex;
	font-size: 24rpx;
}
.text view:last-child{
	color: #00B7FF;
}
.code-btn{
	max-height: 50rpx;
	padding: 0 20rpx;
	line-height: 50rpx;
	border-radius: 40rpx;
}

</style>
